<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">我是首页</div> -->
    <!-- <div class="dashboard-text">欢迎您！</div> -->
    <!--<div class="dashboard-text">name:{{ name }}</div>-->
    <!--<div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>-->
    <!-- 首页 -->
    <!-- <myEchart/> -->
    <!-- <div id="myChart" :style="{width: '100%', height: '300px'}"/> -->
    <!-- <h3>{{ titleText }}</h3> -->
    <div class="indexWarp">
      <div class="top">
        <div class="title">待处理事物</div>
      </div>
      <div class="content">
        <div class="pending">
          <p>待发货订单: <span class="keyStr">{{ isPayOrderLen }}</span> 单</p>
          <p>待处理退款单: <span class="keyStr">{{ refundOrderLen }}</span> 单</p>
          <p>待处理收货退单: <span class="keyStr">{{ salesReturnLen }}</span> 单</p>
        </div>
      </div>
    </div>
    <!-- yesterdayData: {},
      weekData: {},
      monthData: {} -->
    <div class="indexWarp_box">
      <div class="indexWarp half">
        <div class="top">
          <div class="title">销售额统计</div>
          <div class="titleRight">总销售额 : <span class="keyStr">{{ totalOrderSales }}</span></div>
        </div>
        <div class="content">
          <div class="statistic">
            <p> <span class="keyStr">{{ yesterdayData.orderSales }}</span> <br> 昨日销售额 </p>
            <p> <span class="keyStr">{{ weekData.orderSales }}</span> <br> 本周销售额 </p>
            <p> <span class="keyStr">{{ monthData.orderSales }}</span> <br> 本月销售额 </p>
            <p> <span class="keyStr">{{ yesterdayData.salesGrowth }}%</span> <br> 环比前一天 </p>
            <p> <span class="keyStr">{{ weekData.salesGrowth }}%</span> <br> 环比上一周 </p>
            <p> <span class="keyStr">{{ monthData.salesGrowth }}%</span> <br> 环比上个月 </p>
          </div>
        </div>
      </div>
      <div class="indexWarp half">
        <div class="top">
          <div class="title">订单量统计</div>
          <div class="titleRight">订单总数量 : <span class="keyStr">{{ totalOrderNums }}</span></div>
        </div>
        <div class="content">
          <div class="statistic">
            <p><span class="keyStr">{{ yesterdayData.orderNums }}</span> <br>  昨日订单总量 </p>
            <p> <span class="keyStr">{{ weekData.orderNums }}</span> <br> 本周订单总量</p>
            <p> <span class="keyStr">{{ monthData.orderNums }}</span> <br> 本月订单总量 </p>
            <p> <span class="keyStr">{{ yesterdayData.numsGrowth }}%</span> <br> 环比前一天</p>
            <p> <span class="keyStr">{{ weekData.numsGrowth }}%</span> <br> 环比上周</p>
            <p> <span class="keyStr">{{ monthData.numsGrowth }}%</span> <br> 环比上个月</p>
          </div>
        </div>
      </div>
    </div>

    <div v-loading="listLoading" class="indexWarp">
      <div class="top">
        <div class="title">订单统计 - {{ titleText }}</div>
        <div class="edit">
          选择统计周期
          <!-- {{ search }} -->
          <el-select v-model="search.typeId" style="width:150px" size="small" @change="changeTime">
            <el-option v-for="item in selectOption" :key="item.label" :label="item.value" :value="item.label"/>
          </el-select>
          <el-date-picker
            v-model="search.startTime"
            class="startDate date"
            size="small"
            type="date"
            style="width:150px"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期"
            @change="changeDataPicker"/>
          <el-date-picker
            v-model="search.endTime"
            class="endDate date"
            size="small"
            type="date"
            style="width:150px"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期"
            @change="changeDataPicker"/>
          <el-button v-preventReClick type="primary" size="mini" @click="toEcharts()">查询</el-button>
        </div>
      </div>
      <div v-if="dataList.length > 0" class="content">
        <p class="echartsTitle">
          <span>{{ cycle }}</span>
          <span>{{ search.startTime }} - {{ search.endTime }}</span> &nbsp;&nbsp;
          订单数量：<span class="keyStr">{{ totalAmount }}</span>单 &nbsp;&nbsp;&nbsp;
          订单总额：<span class="keyStr">{{ totalQuantity }}</span>元
        </p>
        <myEchart :echart-data="dataList"/>
      </div>
      <div v-else class="noData">
        <span><i class="el-icon-info"/>&nbsp;暂无数据</span>
      </div>
    </div>
    <div class="indexWarp">
      <div class="top">
        <div class="title">用户统计</div>
      </div>
      <div class="content">
        <div class="newAdd">
          <p><span class="keyStr">{{ statistical.today }}</span> <br> 今日新增 </p>
          <p><span class="keyStr">{{ statistical.yesterday }}</span> <br>昨日新增 </p>
          <p><span class="keyStr">{{ statistical.thisMonth }}</span> <br>本月新增 </p>
          <p><span class="keyStr">{{ statistical.total }}</span> <br>用户总数 </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import myEchart from '@/components/echarts'
import { getStoreOrder, getRefundOrderList } from '@/api/storeOrder'

import { salesAndNumber, totalSalesAndNumber, getStatistical, getOrderEcharts, getTotalAmountAndTotalQuantity } from '@/api/index'

var colors = ['#333', '#333', '#675bba'];
export default {
  name: 'Dashboard',
  components: { myEchart },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      listLoading: false,
      dataList: [],
      //   newData: [
      //     ['2019-01-01 12:22:19', 100, 200.01],
      //     ['2019-02-02 13:13:36', 400, 200.00],
      //     ['2019-03-03 14:13:36', 900, 1008.00],
      //     ['2019-04-04 15:25:25', 200, 320.40],
      //     ['2019-05-05 16:09:32', 500, 680.00],
      //     ['2019-06-06 17:02:53', 700, 987.01],
      //     ['2019-07-07 18:18:10', 100, 1150.03],
      //     ['2019-08-08 19:57:49', 1120, 1900.01],
      //     ['2019-09-09 20:37:35', 8, 10.00],
      //     ['2019-10-10 21:12:49', 2, 2.00],
      //     ['2019-11-11 22:13:36', 400, 500.00],
      //     ['2019-12-12 23:13:36', 900, 1008.00],
      //     ['2020-01-01 01:13:36', 2, 5.00],
      //     ['2020-02-02 02:13:36', 2, 6.00],
      //     ['2020-03-03 03:22:19', 100, 200.01],
      //     ['2020-04-04 04:13:36', 400, 500.00],
      //     ['2020-05-05 05:13:36', 900, 1008.00],
      //     ['2020-06-06 06:25:25', 200, 320.40],
      //     ['2020-07-07 07:09:32', 500, 680.00],
      //     ['2020-08-08 08:02:53', 700, 987.01],
      //     ['2020-09-09 09:18:10', 100, 1150.03],
      //     ['2020-10-10 10:13:36', 500, 450.00],
      //     ['2020-11-11 11:13:36', 500, 430.00],
      //     ['2020-12-04 0:25:25', 200, 320.40]
      //   ],
      weekList: {
        date: ['周一', '周二', '周三', '周四', '周五', '周六']
        // data1: [120, 132, 101, 134, 190, 230],
        // data2: [220, 182, 191, 114, 290, 330]
      },
      selectOption: [
        { label: 1, value: '上一日' },
        { label: 2, value: '上一周' },
        { label: 3, value: '上个月' },
        { label: 4, value: '上个季度' },
        { label: 5, value: '上一年' },
        { label: 6, value: '自定义时间' }
      ],
      titleText: '日统计',
      title: {
        1: '日统计',
        2: '周统计',
        3: '月统计',
        4: '季度统计',
        5: '年统计',
        6: '自定义时间'
      },
      search: {
        typeId: 1,
        startTime: '',
        endTime: ''
      },
      totalAmount: '', // 查询订单总额
      totalQuantity: '', // 查询订单总量

      totalOrderSales: '', //
      totalOrderNums: '',
      yesterdayData: {},
      weekData: {},
      monthData: {},
      // 统计用户数据
      statistical: {
        thisMonth: '',
        today: '',
        total: '',
        yesterday: ''
      },
      cycle: '',
      isPayOrderLen: '', // 待发货订单数量  （已付款）
      refundOrderLen: '', // 待处理退单   （退款申请审核）
      salesReturnLen: '' // 待处理收货退单 （退货中））

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    this.getStoreOrderList(100)
    this.getRefundOrderLen(0)
    this.getRefundOrderLen(300)
    // this.isPayOrderLen = this.getStoreOrderList(100) // 已付款未发货
    // this.refundOrderLen = this.getRefundOrderLen(0) // 待处理退单
    // console.log('this.refundOrderLen::::', this.refundOrderLen)
    // this.drawLine();
    this.getYesterday()
    this.getWeek()
    this.getMonth()

    this.getTotalSales()
    this.getStatistical()
    this.getOrderEchartsFn()
  },
  methods: {
    // 已付款、等待发货
    getStoreOrderList(orderStatus) {
      const newData = {
        pageNum: 0,
        pageSize: 1000,
        orderStatus: 100 // 已付款
      }
      getStoreOrder(newData).then(response => {
        if (response.code === '200') {
          // this.list = response.data.list
          console.log('已付款：', response.data.list)
          this.isPayOrderLen = response.data.list.length
          // return response.data.list.length
          // this.total = response.data.total
        } else {
          Message.error(response.message + '-' + response.data)
        }
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
      })
    },
    // 待退款
    getRefundOrderLen(refundOrderStatus) {
      const newData = {
        pageNum: 0,
        pageSize: 1000,
        refundOrderStatus // 待审核
      }
      getRefundOrderList(newData).then(response => {
        if (response.code === '200') {
        //   this.list = response.data.list
        //   this.total = response.data.total
          console.log('退：', response.data.list)
          if (refundOrderStatus === 0) this.refundOrderLen = response.data.list.length
          if (refundOrderStatus === 300) this.salesReturnLen = response.data.list.length
          // return response.data.list.length
        } else {
          Message.error(response.message + '-' + response.data)
        }
      })
    },

    getOrderEchartsFn() {
      this.dataList = []
      getOrderEcharts(this.search).then(res => {
        if (res.code === '200') {
          this.dataList = res.data
        } else {
          Message.error(res.message + '' + res.data)
        }
        console.log('Echarts图标数据：', res)
      })
      getTotalAmountAndTotalQuantity(this.search).then(res => {
        if (res.code === '200') {
          console.log('getTotalAmountAndTotalQuantity', res)
          this.totalAmount = res.data.orderNums// 查询订单总量
          this.totalQuantity = res.data.orderSales // 查询订单总额
        } else {
          Message.error(res.message + '' + res.data)
        }
      })
    },
    // 统计用户数据
    getStatistical() {
      getStatistical().then(res => {
        if (res.code === '200') {
          this.statistical.thisMonth = res.data.thisMonth
          this.statistical.today = res.data.today
          this.statistical.total = res.data.total
          this.statistical.yesterday = res.data.yesterday
        }
        console.log('统计用户数据', res)
      })
    },
    // 获取总销售额、总订单量
    getTotalSales() {
      totalSalesAndNumber().then(res => {
        console.log(res)
        if (res.code === '200') {
          this.totalOrderSales = res.data.orderSales
          this.totalOrderNums = res.data.orderNums
        } else {
          Message.error(res.message + '' + res.data)
        }
      })
    },
    getYesterday() {
      salesAndNumber({ date: 'yesterday' }).then(res => {
        console.log('yesterday::::', res)
        if (res.code === '200') {
          this.yesterdayData = res.data
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    getWeek() {
      salesAndNumber({ date: 'week' }).then(res => {
        if (res.code === '200') {
          this.weekData = res.data
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    getMonth() {
      salesAndNumber({ date: 'month' }).then(res => {
        if (res.code === '200') {
          console.log('获取月份', res.data)
          this.monthData = res.data
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    changeDataPicker() {
      this.cycle = ''
    },
    changeTime(val) {
      console.log(val)
      // this.listLoading = true
      this.titleText = this.title[val]
      const obj = this.selectOption.filter(item => item.label === val)
      console.log(obj)
      this.cycle = obj[0].value
      //   this.dataList = this.newData
      if (val !== 6) {
        this.listLoading = true
        this.getOrderEchartsFn()
        this.search.startTime = ''
        this.search.endTime = ''
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      }
    },
    toEcharts() {
      // this.dataList = this.weekList
      if (this.search.typeId === 6 && !this.search.startTime && !this.search.endTime) {
        Message.error('请选择开日时间以及结束时间')
        return false
      }
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && !this.search.endTime) {
        Message.error('请选择结束时间')
        return false
      }
      if (this.search.endTime && !this.search.startTime) {
        Message.error('请选择开始时间')
        return false
      }
      // if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      // if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'

      this.search.typeId = 6
      this.getOrderEchartsFn()
      // console.log(this.dataList)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.indexWarp{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    .top {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
        .title{
            padding-left: 10px;
            float: left;
            font-size: 14px;
            font-weight: b;
        }
        .edit{
            padding-right: 10px;
            float: right;
            font-size: 12px;
        }

        .titleRight{
            padding-right: 20px;
            float: right;
            font-size: 12px;
            color:#666;
            .keyStr{
                color:#F56C6C;
                font-size: 20px;
            }

        }
    }
    .content{
        padding-bottom:10px;
        position: relative;
        .echartsTitle {
            font-size: 12px;
            color: #666;
            position: absolute;
            right: 140px;
            top: 0;
            .keyStr{
                color: #F56C6C;
                font-size: 18px;
            }
        }

        // 待处理
        .pending{
            width: 100%;
            height: 100px;
            line-height: 100px;
            margin-bottom:20px;
            font-size: 16px;
            color:#666;
            display: flex;
            justify-content: space-evenly;
            .keyStr{
                color:#F56C6C;
                font-size: 28px;
            }
        }

        // 统计
        .statistic{
            width: 100%;
            font-size: 16px;
            color:#999;
            display: flex;
            flex-wrap:wrap;
            padding: 10px 0;
            .keyStr{
                color:#333;
                font-weight: 400;
                font-size: 20px;
            }
            p{
                width:33%;
                text-align: center;
                line-height: 20px;
                font-size: 12px;
            }
        }

        // 今日新增
        .newAdd{
            width: 100%;
            line-height: 20px;
            padding-top: 20px 0 10px 0;
            font-size: 16px;
            color:#666;
            display: flex;
            justify-content: space-evenly;
            text-align: center;
            .keyStr{
                color:#F56C6C;
                font-size: 28px;
            }
        }
    }
    .noData{
        height: 310px;
        line-height: 310px;
        color: #999;
        text-align: center;
    }
}
.indexWarp_box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .half{
            width: 49% !important;
        }
    }
</style>
